<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho&effect=scuffed-steel">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<script type="text/javascript" src="../common/component/jquery/jquery-1.7.1.js"></script>
<script charset="utf-8" src="../common/component/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../common/component/kindeditor/lang/zh_CN.js"></script>

<style type="text/css">

	html {
		overflow: hidden;
	}

	body {
		margin: 0;
		background-color: #601986;
	}
	
	#topMenu {
		width: 100%;
		background-color: #8628b9;
		-webkit-box-shadow: 0px 5px 20px black;
	}
	
	#bottomMenu {
		position: absolute;
		width: 100%;
		background-color: #8628b9;
		-webkit-box-shadow: 0px -5px 20px black;
		text-align: center;
	}
	
	#articleList {
		position: absolute;
	}
	
	.article {
		position: relative;
		background-color: white;
		height: 100px;
		-webkit-border-radius: 10px;
		-webkit-box-shadow: 10px 10px 20px black;
		margin-top: 20px;
		cursor: pointer;
	}
	
	.articleTitle {
		font-size: 25px;
		margin: 5px 0 0 10px;
	}
	
	.articleContent {
		font-size: 12px;
		color: gray;
		margin: 5px 0 0 20px;
	}
	
	.articleCreateTime {
		position: absolute;
		top: 10px;
		font-size: 12px;
	}
	
	#scroll {
		position: absolute;
		top: 10px;
		background-color: #8628b9;
		width: 10px;
		height: 50px;
	}
	
	#articleTypeList {
		position: absolute;
		left: 150px;
	}
	
	.menu {
		display: inline-block;
		height: 40px;
		font-size: 30px;
		font-weight: bold;
		color: black;
		cursor: pointer;
		text-align: center;
		padding: 5px;
	}
	
	.menu:hover {
		background-color: #601986;
	}
	
	#toolbar {
		margin-top: 10px;
		text-align: center;
	}
	
	#toolbar img {
		cursor: pointer;
	}
	
	.toolBtn {
		
	}
	
	#head {
		cursor: pointer;
    	-webkit-transform:rotate(0deg);
    	-webkit-transition: -webkit-transform 0.3s linear;
	}
	
	#addComponent {
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: white;
		border: 1px solid black;
		-webkit-border-radius: 10px;
		-webkit-box-shadow: 0px 0px 20px black;
		width: 800px;
		text-align: center;
		z-index: 2;
	}
	
	#title {
		border: 0;
		height: 50px;
		width: 500px;
		text-align: center;
		font-size:40px;
		margin-top: 10px;
    	-webkit-transition: -webkit-box-shadow 0.3s linear;
	}
	
	#content {
		text-align: left;
		width: 760px;
		overflow: auto;
		border: 1px solid black;
	}
	
	#maskDiv {
		position:absolute;
		left: 0px;
		top: 0px;
		opacity: 0.5;
		background-color: black;
		display: none;
		z-index: 1;
	}
	
	.submitBtn {
		cursor: pointer;
		-webkit-box-shadow: 0px 0px 20px gray;
		margin-top: 10px;
	}
	
	#articleTypeSelector {
		font-size: 12px;
		position: relative;
		left: -300px;
	}
	
	
	#maskDiv1 {
		position:absolute;
		left: 0px;
		top: 0px;
		opacity: 0.5;
		background-color: black;
		display: none;
		z-index: 3;
	}
	
	#addTypeComponent {
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: white;
		border: 1px solid black;
		width: 200px;
		height:130px;
		text-align: center;
		-webkit-border-radius: 10px;
		-webkit-box-shadow: 0px 0px 20px black;
		display: none;
		z-index: 4;
	}
	
	#detailComponent {
		position: absolute;
		left: 0px;
		top: 0px;
		background-color: white;
		border: 1px solid black;
		-webkit-border-radius: 10px;
		-webkit-box-shadow: 0px 0px 20px black;
		width: 800px;
		text-align: center;
		z-index: 2;
		display: none;
	}
	
	#articleTitle {
		text-align: center;
		margin-top: 30px;
		font-size: 40px;
		font-weight: bold;
	}
	
	#articleContent {
		text-align: left;
		margin: 5px 0 0 20px;
		overflow: auto;
	}

</style>
</head>
<body>
	
	<div id="topMenu">
		<div id="articleTypeList">
		</div>
	</div>
	<div style="position: relative; overflow: hidden;" onmousewheel="scroll();">
		<div id="articleList">
			<div class="article" onclick="chooseArticle(this);">
				<div class="articleTitle">
					测试文章
				</div>
				<div class="articleContent">
					测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章测试文章
				</div>
				<div class="articleCreateTime">
					2012-01-01 14:01:25
				</div>
			</div>
			<div class="article">2</div>
			<div class="article">3</div>
			<div class="article">4</div>
			<div class="article">5</div>
			<div class="article">6</div>
		</div>
		<div id="scroll"></div>
	</div>
	
	<div id="bottomMenu">
		<img id="head" src="../images/headUp.png" onclick="showToolbar();" onmouseover="change('1');" onmouseout="change('2');"/>
		<div id="toolbar">
			<img alt="新增" title="新增" src="../images/add.png" onclick="showAddComponent();"/>
			<img alt="修改" title="修改" src="../images/edit.png" onclick="showEditComponent();"/>
			<img alt="删除" title="删除" src="../images/garbage.png" onclick="deleteArticle();"/>
		</div>
	</div>
	
	<div id="maskDiv">
	</div>
	<div id="addComponent">
		<input id="title" type="text" placeholder="此处输入标题"/>
		<div id="articleTypeSelector">
			请选择分类：
			<select id="articleType">
			</select>
			<img src="../images/at_add.png" style="cursor: pointer;" onclick="showAddTypeComponent();"/>
		</div>
		<div id="content"></div>
		<img class="submitBtn" src="../images/a_submit.jpg" onclick="articleOperation()"/>
	</div>
	
	<div id="maskDiv1">
	</div>
	<div id="addTypeComponent">
		<input type="text" id="typeName"  placeholder="此处输入分类名称" style="border: 0;text-align: center;margin-top: 30px;"/>
		<img class="submitBtn" src="../images/a_submit.jpg" onclick="addArticleType()"/>
	</div>
	
	<div id="detailComponent">
		<div id="articleTitle">sdfsdfsdfsdfsdfdsf</div>
		<div id="articleContent">sdfsdfsdf</div>
	</div>
	
</body>
<script type="text/javascript">

	var currentArticleType;			// 当前选中的文章文类
	var currentArticle;				// 当前选择的文章
	var docHeight = $(document).height();
	var changeMode = "1";
	var editor;
	var editArticleId;				// 待编辑的文章ID

	$(document).ready(function(){
		KindEditor.ready(function(K) {
			editor = K.create('div[id="content"]', {
				uploadJson : '../common/component/kindeditor/jsp/upload_json.jsp',
				allowFileManager : true,
				resizeType : 0,
				height: $("#addComponent").height() - 180
			});
 			// 编辑器居中对齐
			$($("#addComponent").find("div")[1]).css("margin-left", "20px");
			$($("#addComponent").find("div")[1]).css("margin-top", "20px");
			// 编辑器初始化后隐藏插入DIV
			$("#addComponent").hide();
		});
		$("#bottomMenu").css("top", $(document).height() - 24);
		$("#bottomMenu").css("height", "100px");
		$("#articleList").parent().css("height", docHeight * 0.8);
		$("#topMenu").css("height", docHeight * 0.2);
		$(".article").css("width", $(document).width() * 0.85);
		$(".article").css("margin-left", $(document).width() * 0.15 / 2);
		$("#scroll").css("left", $(document).width() - 10);
		$("#articleTypeList").css("top", docHeight * 0.2 - 50);
		$("#maskDiv").width($(document).width());
		$("#maskDiv").height($(document).height());
		$("#maskDiv1").width($(document).width());
		$("#maskDiv1").height($(document).height());
		$("#addComponent").css("height", docHeight * 0.9);
		$("#addComponent").css("top", (docHeight * 0.1) / 2);
		$("#addComponent").css("left", ($(document).width() - $("#addComponent").width()) / 2);
		$("#detailComponent").css("height", docHeight * 0.9);
		$("#detailComponent").css("top", (docHeight * 0.1) / 2);
		$("#detailComponent").css("left", ($(document).width() - $("#addComponent").width()) / 2);
		$("#addTypeComponent").css("top", (docHeight - 100) / 2);
		$("#addTypeComponent").css("left", ($(document).width() - $("#addTypeComponent").width()) / 2);
		$("#articleContent").height($("#detailComponent").height() - 100);
		
		$("#toolbar img").mouseover(function(){
			$(this).attr("src", $(this).attr("src").substring(0, $(this).attr("src").length - 4) + "1.png");
		}).mouseout(function() {
			$(this).attr("src", $(this).attr("src").substring(0, $(this).attr("src").length - 5) + ".png");
		});
		
		// 加载文章分类
		loadArticleType();
	});
	
	$(document).keydown(function(e){
		var key =  e.which;
		if(event.ctrlKey) {
       		if(key == 13) {
       			addArticle();
       		}
       	}
   		if(key == 27) {
   			if($("#addTypeComponent").css("display") != "none") {
   				hideAddTypeComponent();
   				return;
   			}
   			if($("#detailComponent").css("display") != "none") {
   				hideArticleDetail();
   			}
   			hideAddComponent();
   		}
    });
	
	function scroll() {
		var scrollHeight = docHeight * 0.8 - 20;
		if(event.wheelDelta < 0) {
			if($("#articleList").position().top >= docHeight * 0.8 - $("#articleList").height()) {
				$("#articleList").css("top", $("#articleList").position().top + event.wheelDelta);
				$("#scroll").css("top", $("#scroll").position().top - event.wheelDelta / ($("#articleList").height() - docHeight * 0.8 + $("#articleList").children().length * 15) * scrollHeight);
			}
		} else { 
			if($("#articleList").position().top + event.wheelDelta <= 50) {
				$("#articleList").css("top", $("#articleList").position().top + event.wheelDelta);
				$("#scroll").css("top", $("#scroll").position().top - event.wheelDelta / ($("#articleList").height() - docHeight * 0.8 + $("#articleList").children().length * 15) * scrollHeight);
			}
		}
	}
	
	function showToolbar() {
		$("#bottomMenu").css("-webkit-transition", "top 1s ease");
		if(parseInt($("#bottomMenu").offset().top) == parseInt(docHeight - 24)) {
			$("#head").css("-webkit-transform", "rotate(180deg)");
			changeMode = "2";
			$("#bottomMenu").css("top", docHeight - 100);
		} else {
			$("#head").css("-webkit-transform", "rotate(0deg)");
			changeMode = "1";
			$("#bottomMenu").css("top", docHeight - 24);
		}
	}
	
	function change(mode) {
		if(mode == "1")
			if(changeMode == "1") {
				$("#head").css("-webkit-transform", "rotate(180deg)");
			} else {
				$("#head").css("-webkit-transform", "rotate(0deg)");
			}
		else {
			if(changeMode == "2") {
				$("#head").css("-webkit-transform", "rotate(180deg)");
			} else {
				$("#head").css("-webkit-transform", "rotate(0deg)");
			}
		}
	}
	
	function chooseArticle(obj) {
		if(!currentArticle) {
			currentArticle = obj;
			$(currentArticle).css("background-color", "#CCCCFF");
			return;
		}
		$(currentArticle).css("background-color", "white");
		currentArticle = obj;
		$(currentArticle).css("background-color", "#CCCCFF");
	}
	
	function showAddComponent() {
		$("#addComponent").fadeIn("slow");
		$("#maskDiv").fadeIn("slow");
		showToolbar();
	}

	function hideAddComponent() {
		$("#addComponent").fadeOut("slow");
		$("#maskDiv").fadeOut("slow");
		$("#title").css("-webkit-box-shadow", "");
		$("#title").val("");
		editor.html('');
	}
	
	function showAddTypeComponent() {
		$("#addTypeComponent").fadeIn("slow");
		$("#maskDiv1").fadeIn("slow");
	}
	
	function hideAddTypeComponent() {
		$("#addTypeComponent").fadeOut("slow");
		$("#maskDiv1").fadeOut("slow");
		$("#typeName").val("");
	}
	
	function showArticleDetail() {
		$("#maskDiv").fadeIn("slow");
		$("#detailComponent").fadeIn("slow");
		articleDetail();
	}
	
	function hideArticleDetail() {
		$("#maskDiv").fadeOut("slow");
		$("#detailComponent").fadeOut("slow");
	}
	
	function searchArticleByType(articleTypeId) {
	    $("#articleList").html("");
		$.post("article.action.jsp", {ACTION:"searchArticlesByType", ARTICLE_TYPE_ID:articleTypeId}, function(data){
			var jsonArr = jQuery.parseJSON(data);
			$.each(jsonArr, function(inx, obj){
				addArticleToList(obj, jsonArr.length, inx);
			});
		});
	}
	
	function loadArticleType() {
		$.post("article.action.jsp", {ACTION:"doLoadArticleType"}, function(data){
			var jsonArr = jQuery.parseJSON(data);
			$.each(jsonArr, function(inx, obj){
				$("#articleTypeList").append("<div class='menu font-effect-scuffed-steel' id='" + obj.ID + "'>" + obj.NAME + "</div>");
				$("#articleType").append("<option value='" + obj.ID + "'>" + obj.NAME + "</option>");
			});
			searchArticleByType($($("#articleTypeList").find("div")[0]).attr("id"));
			currentArticleType = $("#articleTypeList").find("div")[0];
			$(currentArticleType).css("background-color", "#601986");
			$(".menu").click(function(){
				if(currentArticleType == this) {
					return;
				}
				$(currentArticleType).css("background-color", "");
				currentArticleType = this;
				$(currentArticleType).css("background-color", "#601986");
				var toleftPX = parseInt(0 - $(document).width() * 0.15 / 2 - $(document).width() * 0.85);
				if($("#articleList").children().length != 0) {
					$.each($("#articleList").children(), function(inx, obj){
						$(obj).css("-webkit-transition", "margin-left " + (1 / ($("#articleList").children().length - inx)) + "s linear");
						if(inx == $("#articleList").children().length - 1) {
							// 判断动画是否结束,结束后清空文章列表
							$(obj).css("margin-left", toleftPX).on("webkitTransitionEnd", function(e) {
							    searchArticleByType($(currentArticleType).attr("id"));
							});
						} else {
							$(obj).css("margin-left", toleftPX);
						}
					});
				} else {
				    searchArticleByType($(currentArticleType).attr("id"));
				}
			});
		});
	}
	
	function articleOperation() {
		if(!editArticleId) {
			addArticle();
		} else {
			editArticle();
		}
	}
	
	function addArticleType() {
		if(!$("#typeName").val()) {
			return;
		}
		$.post("article.action.jsp", {ACTION:"addArticleType", NAME:$("#typeName").val()}, function(data){
			var json = jQuery.parseJSON(data);
			$("#articleType").append("<option value='" + json.ID + "'>" + json.NAME + "</option>");
			hideAddTypeComponent();
		});
	}
	
	function addArticle() {
		if($("#title").val() == "") {
			$("#title").css("-webkit-box-shadow", "0px 0px 20px red");
			return;
		}
		if(editor.isEmpty()) {
			return;
		}
		$.post("article.action.jsp", {ACTION:"addArticle", TITLE:$("#title").val(), CONTENT:escape(editor.html()), ARTICLE_TYPE_ID:$("#articleType").val()}, function(data){
			var json = jQuery.parseJSON(data);
			addArticleToList(json, 1, 0);
			hideAddComponent();
		});
	}
	
	function addArticleToList(article, size, index) {
		var articleHtml = "<div id='" + article.ID + "' onselectstart='return false' class='article' onclick='chooseArticle(this);' ondblclick='showArticleDetail();' style='margin-left:" + parseInt(0 - $(document).width() * 0.15 / 2 - $(document).width() * 0.85) + "px;'>" +
							"<div class='articleTitle'>" + article.TITLE + "</div>" +
							"<div class='articleContent'>" + unescape(article.CONTENT).substring(0, 150) + "...</div>" +
							"<div class='articleCreateTime' style='left:" + ($(document).width() * 0.85 - 80) + "px;'>" + article.CREATE_TIME + "</div>" +
						"</div>";
		$("#articleList").append(articleHtml);
		//$("#articleList").append("<div id='" + obj.ID + "' class='article' style='margin-left:" + parseInt(0 - $(document).width() * 0.15 / 2 - $(document).width() * 0.85) + "px;'>" + obj.TITLE + "</div>");
		$("#" + article.ID).css("width", $(document).width() * 0.85);
		$("#" + article.ID).css("-webkit-transition", "margin-left " + (1 / (size - index)) + "s linear");
		$("#" + article.ID).css("margin-left", $(document).width() * 0.15 / 2);
		$("#articleList").css("top", "0");
		$("#scroll").css("top", "10px");
	}
	
	function showEditComponent() {
		if(!currentArticle) {
			return;
		}
		$("#addComponent").fadeIn("slow");
		$("#maskDiv").fadeIn("slow");
		showToolbar();
		$.post("article.action.jsp", {ACTION:"searchArticleById", ARTICLE_ID:$(currentArticle).attr("id")}, function(data){
			var json = jQuery.parseJSON(data);
			editArticleId = json.ID;
			$("#title").val(json.TITLE);
			editor.html(unescape(json.CONTENT));
			$("#articleType").val(json.ARTICLE_TYPE_ID);
		});
	}
	
	function editArticle() {
		if($("#title").val() == "") {
			$("#title").css("-webkit-box-shadow", "0px 0px 20px red");
			return;
		}
		if(editor.isEmpty()) {
			return;
		}
		$.post("article.action.jsp", {ACTION:"editArticle", ID:editArticleId, TITLE:$("#title").val(), CONTENT:escape(editor.html()), ARTICLE_TYPE_ID:$("#articleType").val()}, function(data){
			var json = jQuery.parseJSON(data);
			$("#" + editArticleId).find(".articleTitle").html(json.TITLE);
			$("#" + editArticleId).find(".articleContent").html(unescape(json.CONTENT).substring(0, 150));
			hideAddComponent();
		});
	}
	
	function deleteArticle() {
		if(!currentArticle) {
			return;
		}
		$.post("article.action.jsp", {ACTION:"deleteArticle", ID:$(currentArticle).attr("id")}, function(data){
			var json = jQuery.parseJSON(data);
			if(json.FLAG == "1") {
				$("#" + $(currentArticle).attr("id")).remove();
			} else {
				alert("删除失败，请联系管理员");
			}
		});
	}
	
	function articleDetail() {
		if(!currentArticle) {
			return;
		}
		$.post("article.action.jsp", {ACTION:"searchArticleById", ARTICLE_ID:$(currentArticle).attr("id")}, function(data){
			var json = jQuery.parseJSON(data);
			editArticleId = json.ID;
			$("#articleTitle").html(json.TITLE);
			$("#articleContent").html(unescape(json.CONTENT));
		});
	}

</script>
</html>